<template>
  <c-dlg title="添加资源" :visible.sync="visible1" :width="800">
    <div style="text-align: left; margin-bottom: 20px;">
      <c-search
        v-model="searchText"
        :height="30"
        :width="200"
        placeholder="搜索"
        class="item"
        @submit="_getResourceList"
      />
    </div>
    <el-table
      ref="resourceTable"
      :data="resourceList"
      row-key="pkid"
      style="width: 100%;"
      height="400"
    >
      <el-table-column width="55">
        <template v-slot="{row}">
          <input v-model="selectList" :value="row.pkid" type="checkbox" @change="handleChange(row)" />
        </template>
      </el-table-column>
      <el-table-column prop="code" label="编号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="资源名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="path" label="路径" show-overflow-tooltip></el-table-column>
    </el-table>
    <div style="text-align: right;">
      <el-pagination
        layout="prev, pager, next"
        :page-size="page.size"
        :current-page.sync="page.index"
        :total="page.total"
        @current-change="_getResourceList"
      ></el-pagination>
    </div>
    <div slot="footer">
      <el-button type="danger" size="small" @click="submit">确定</el-button>
      <el-button size="small" @click="cancle">取消</el-button>
    </div>
  </c-dlg>
</template>

<script>
import CSearch from "@/components/CSearch";
import CDlg from "@/components/CDlg";
export default {
  components: { CSearch, CDlg },
  props: {
    selectRows: {
      type: Array,
      default() {
        return [];
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchText: "",
      page: {
        index: 1,
        size: 16,
        total: 0
      },
      resourceList: [],
      selectList: [],
      visible1: this.visible,
      retList: []
    };
  },
  watch: {
    visible1(v) {
      this.$emit("update:visible", v);
    },
    visible: {
      handler: function(v) {
        if (v) {
          this.retList = this.selectRows;
          this.selectList = this.selectRows.map(e => e.pkid);
        }
        this.visible1 = v;
      },
      immediate: true
    }
  },
  created() {
    this._getResourceList();
  },
  methods: {
    _getResourceList() {
      const params = {
        name: this.searchText,
        rows: this.page.size,
        page: this.page.index
      };
      return this.$axios
        .get("plat/user/queryRes", { params })
        .then(res => {
          if (res.code === 1) {
            this.resourceList = res.data.rows;
            this.$set(this.page, "total", res.data.total);
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e));
    },
    handleChange(row) {
      if (this.selectList.indexOf(row.pkid) > -1) {
        this.retList.push(row);
      } else {
        this.retList.filter(e => e !== row.pkid);
      }
    },
    submit() {
      this.$emit("submit", this.retList);
      this.$emit("update:visible", false);
    },
    cancle() {
      this.$emit("submit", this.selectRows);
      this.$emit("update:visible", false);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
